<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="1000px"
      @closed="closed"
    >

    <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :loading="loading"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleDictDataTable"
      :data="tableData"
      border
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
<!--      <el-table-column
        prop="code"
        label="字典编码"
        >
      </el-table-column> -->
      <el-table-column
        prop="label"
        label="字典标签"
        >
      </el-table-column>

      <el-table-column
        prop="value"
        label="字典键值"
        >
      </el-table-column>

      <el-table-column
        prop="sort"
        label="字典排序"
        width="80"
        align="center"
        >
      </el-table-column>

      <el-table-column prop="status" label="状态" width="80"
      align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status='0' " >正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>

<!--      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFormat}}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="left" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    </el-dialog>


    <!--弹出窗口-->
    <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="dialogFormVisible" autocomplete="off" width="500px" >
      <el-form ref="dictDataForm" :model="dictDataForm" :rules="dictDataFormRules">
        <el-input
          ref="id"
          v-model="dictDataForm.id"
          autocomplete="off"
          name="id"
          type="hidden"
          style="display: none;"
        />
        <el-input
          ref="id"
          v-model="dictDataForm.dictId"
          autocomplete="off"
          name="dictId"
          type="hidden"
          style="display: none;"
        />

        <el-form-item label-width="80px" label="字典标签" prop="label">
          <el-input
            ref="label"
            v-model="dictDataForm.label"
            placeholder="请输入标签"
            autocomplete="off"
            name="label"
          />
        </el-form-item>
        <el-form-item label-width="80px" label="字典编码" prop="code">
          <el-input ref="code" v-model="dictDataForm.code" placeholder="请输入编码" autocomplete="off" name="code" />
        </el-form-item>
        <el-form-item label-width="80px" label="字典键值" prop="value">
          <el-input ref="code" v-model="dictDataForm.value" placeholder="请输入键值" autocomplete="off" name="value" />
        </el-form-item>
        <el-form-item label-width="80px" label="字典状态" prop="status">
          <el-switch v-model="dictDataForm.status" active-value="0" inactive-value="1" />
        </el-form-item>
        <el-form-item label-width="80px" label="字典序号">
          <el-input v-model="dictDataForm.sort" placeholder="请输入序号" autocomplete="off" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogForEdit()">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    saveDictData,
    findDictDataList,
    deleteDictData
  } from '@/api/system/dict'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'ItemsDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.dictData= value.data
            this.title = '当前字典:'+value.data.name
          } else {
            this.dictData={}
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.load();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        dictData: {
        },
        queryForm: {
          dictId:''
        },
        tableData: [],
        dialogFormVisible:false,
        dictDataForm:{
          id:'',
          dictId:'',
          label:'',
          code:'',
          value:'',
          status:'0',
          sort:1,
        },
        dictDataFormRules: {
          label: [{
            required: true,
            message: '请输入标签',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          code: [{
            required: true,
            message: '请输入编码',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          value: [{
            required: true,
            message: '请输入键值',
            trigger: 'blur'
          }
          ]
        }
      }
    },
    methods:{
      load(){
        this.loading=true
        findDictDataList({
          dictId: this.dictData.id
        }).then(rsp => {
          if(isOk(rsp)){
            this.tableData = rsp.result
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      openDialogForEdit(data) {
        const _this = this
        if (data) {
          _this.dictDataForm = data
        } else {
          this.reset();
        }
        _this.dialogFormVisible = true
      },
      closeDialogForEdit() {
        const _this = this
        _this.dialogFormVisible = false
        _this.loading = false
        this.reset();
        _this.$refs['dictDataForm'].resetFields()
      },
      handleAdd(){
        this.openDialogForEdit();
      },
      handleEdit(data) {
        this.openDialogForEdit(data)
      },
      reset(){
        this.dictDataForm={
          id:'',
          dictId:this.dictData.id,
          label:'',
          code:'',
          value:'',
          status:'0',
          sort:1,
        };
      },
      submitForm: function() {
        this.$refs.dictDataForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveDictData(this.dictDataForm).then(rsp => {
              if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: rsp.message
                })
                this.load();
                this.loading = false
              }
            })
          }
        })
      },
      handleDelete(data) {
        const _this = this
        _this
          .$confirm('确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            deleteDictData({
              id: data.id
            }).then(rsp => {
              if (rsp.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                _this.load()
              }
            })
          })
          .catch(() => {})
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style lang="scss" >

  .el-dialog__body {
      padding: 10px 10px;
  }
</style>
